<template>
  <template v-if="isAlready">
      <div style="float: left;width: 100%;">
        <el-table
			:key="tk"
            :data="changeItems"
            stripe
            border
            empty-text="暂无变动"
            style="width: 100%;height: 380px;">
          <el-table-column
              prop="name"
              label="变更项目">
          </el-table-column>
          <el-table-column
              prop="before"
              label="变更前">
			  <template #default="scope">
				  <ex-form-item size="small" :column="scope.row" :model="{}" :fixed-value="scope.row.before" :show-label="false"/>
			  </template>
          </el-table-column>
          <el-table-column
              prop="after"
              label="变更后">
			  <template #default="scope">
				  <ex-form-item size="small" :column="scope.row" :model="{}"  :fixed-value="scope.row.after"  :show-label="false"/>
			  </template>
          </el-table-column>
        </el-table>
      </div>
  </template>
</template>
<script>

import draggable from "vuedraggable";
import ExFormItem from "@/components/exFormItem/index.vue";
import ExTable from "@/components/exTable/index.vue";
import cache from "@/utils/cache";
import {defineAsyncComponent} from "vue";
import ExLabel from "@/components/exLabel/index.vue";


export default {
  name: "wAssetChangeInfo",
  computed: {
    cache() {
      return cache
    }
  },
  components: {ExLabel, ExTable, ExFormItem, draggable},
  props: {
    model: {type: Object, default: {}},
    widget: {type: Object, default: null},
    drag: {type: Boolean, default: false},
  },
  data() {
    return {
      isAlready: false,
      loading: false,
      columnGroups:null,
      changeItems:[],
	  tk:0,
    }
  },
  watch: {
    model:{
      async handler() {
        this.refreshData();
      },
      deep:true,
      immediate:false,
    },
  },
  async created() {

  },
  async mounted() {
	  if (!this.columnGroups) {
		  this.columnGroups = await this.$cache.data.loadColumnGroups();
	  }
	  this.refreshData()
	  this.isAlready = true;
  },
  methods: {
	  refreshData(){
		  if(this.model.changeInfo&&this.columnGroups){
			  let items = [];
			  for (let prop in this.model.changeInfo) {
				  this.columnGroups.forEach(group => {
					  group.items.forEach(item => {
						  if (item.pathCode.includes('0000004')&&(item.dynamicCode + "." + item.code === prop || item.code === prop)) {
							  item.isReadonly="1";
							  items.push(Object.assign({},item,this.model.changeInfo[prop]));
						  }
					  });
				  });
			  }
			  this.changeItems = items;
			  this.tk++;
		  }
	  }
  }
}
</script>
<style>
.tableItemClass {
  cursor: move;
  float: left;
  background: #fff;
  height: 35px;
  text-align: center;
  horiz-align: center;
  border: 1px dashed #e6e6e6;
}

.tableItemClass:hover {
  border-color: rgb(71, 231, 250);
}

.tableDragAreaClass {
  height: 40px;
  background: rgba(243, 149, 95, 0.1);
}
</style>
